<template>
  <div>
    <el-table
      :data="tableData"
      stripe
      style="width: 100%"
      class="table"
      height="650"
      max-height="650"
      highlight-current-row
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      id="out_table"
    >
      <el-table-column prop="date" label="日期" width="150"> </el-table-column>

      <el-table-column prop="week" label="周" width="150"> </el-table-column>

      <el-table-column prop="max_temp" label="最高温度(C)" width="150">
      </el-table-column>

      <el-table-column prop="min_temp" label="最低温度(C)"> </el-table-column>
      <el-table-column prop="weather" label="天气"> </el-table-column>
      <el-table-column prop="wind_direction" label="风向"> </el-table-column>
      <el-table-column prop="wind_speed" label="风速(级)"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      //   表格数据
      tableData: [],
      loading:true,
    };
  },
  methods: {
    filterTag(value, row) {
      return row.status === value;
    },
  },
  async created() {
    const res = await axios({
      method: "GET",
      url: "static/weather.json",
    });
    //   console.log(res.data);
    this.tableData = res.data;
    this.loading=false;
  },
};
</script>

<style scoped>
.table {
  margin-top: 10px;
}

.el-row {
  margin-left: 10px;
  margin-top: 20px;
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  /* background: #d3dce6; */
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.addbtn {
  margin-top: 12px;
  margin-left: 15px;
}
</style>
